{extend name="base"/}
{block name="title"}拖动{/block}
{block name="resource"}
<style>
    .container{
        width:300px;
        height:500px;
        margin:20px auto;
        position: relative;
        background: #ccc;
    }
    .container .box{
        position: absolute;
        width:50px;
        height:50px;
        left:0;
        top:0;
        background: red;
    }
    .option{
        position: absolute;
        left:10px;
        top:20px;
    }
    .option button{
        margin-bottom: 10px;
    }
</style>
{/block}
{block name="body"}
<div class="option">
    <div><button data-bgColor="red" data-resize="0">创建红盒子</button></div>
    <div><button data-bgColor="blue" data-resize="1">创建蓝盒子</button></div>
    <div><button data-bgColor="yellow" data-resize="0">创建黄盒子</button></div>
</div>
<div class="container" id="container">

</div>
{/block}
{block name="script"}
<script src="ROOT_PATH/static/js/learn/drag/drag.js"></script>
<script>
    $(function(){
        var idNum = 1;
        var boxLists = [];
        $(".option button").on('click', function(){
            var bgColor = $(this).attr('data-bgColor');
            var isResize = $(this).attr('data-resize');

            var boxId = 'box' + idNum;
            var boxHtml = `<div class="box" id="${boxId}"style="background:${bgColor};"></div>`;
            $("#container").append(boxHtml);
            var boxObj = new DragBox({
                boxId : boxId,
                containerId : 'container',
                isResize : Boolean(Number(isResize)),
            });
            var length = boxLists.push(boxObj);
            boxObj.setIndex(length - 1);
            idNum ++;
        })
        window.boxLists = boxLists;
    })
</script>
{/block}

